<template>
	<view>
		<!-- 内容；列表 -->
		<block v-for="(item, index) in list" :key="index"><DetailList :itemLis="item" :index="index"></DetailList></block>
		<!-- 评论区域 -->
		<view class="comments">
			<view class="new_comment">最新评论 {{ comments.length }}</view>

			<block v-for="(item, index) in comments" :key="index">
				<view class="comment-item"><UniComment :item="item"></UniComment></view>
			</block>
		</view>
		<view style="height:150rpx;"></view>
		<!-- 评论输入框 -->

		<ChatMessage @submit="submit"></ChatMessage>

		<!-- 分享到 -->
		<ShareMore :shareShow="shareShow" @toggle="toggle"></ShareMore>
	</view>
</template>

<script>
import time from '@/static/js/time.js';
import DetailList from '@/components/detail-lsit/detail-lsit';
import UniComment from '@/components/uni-comment/uni-comment.vue';
import ChatMessage from '../../components/chat-message.vue';
import ShareMore from '../../components/share-more/share-more';
export default {
	components: {
		DetailList,
		UniComment,
		ChatMessage,
		ShareMore
	},
	data() {
		return {
			list: [
				{
					userpic: '../../static/demo/userpic/12.jpg',
					username: '哈哈',
					sex: 0, //0 男 1 女
					age: 25,
					isguanzhu: false,
					title: '我是标题',
					titlepic: '../../static/demo/datapic/13.jpg',
					morepic: ['../../static/demo/datapic/13.jpg', '../../static/demo/datapic/14.jpg', '../../static/demo/datapic/15.jpg'],
					video: false,
					share: false,
					path: '深圳 龙岗',
					sharenum: 20,
					commentnum: 30,
					goodnum: 20
				}
			],
			// 评论数据
			comments: [],
			// 分享按钮的显示状态
			shareShow: true
		};
	},
	onLoad(e) {
		this.changeNavTitle(JSON.parse(e.detailList));
		this.getComments();
	},
	// 监听导航栏右侧按钮
	onNavigationBarButtonTap(e) {
		if (e.index == 0) {
			this.toggle();
		}
	},
	methods: {
		// 修改导航条
		changeNavTitle(obj) {
			uni.setNavigationBarTitle({
				title: obj.title
			});
		},
		toggle() {
			this.shareShow = false;
		},
	
		// 获取评论内容
		getComments() {
			let arr = [
				{
					id: 1,
					fid: 0,
					userpic:
						'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fyouimg1.c-ctrip.com%2Ftarget%2Ftg%2F035%2F063%2F726%2F3ea4031f045945e1843ae5156749d64c.jpg&refer=http%3A%2F%2Fyouimg1.c-ctrip.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1623130060&t=cecec57b4d51b8cd7072ddbbf73290d2',
					username: '小猫咪',
					time: '1555400035',
					data: '支持国产，支持DCloud!'
				},
				// 子级评论
				{
					id: 2,
					fid: 1,
					userpic:
						'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fyouimg1.c-ctrip.com%2Ftarget%2Ftg%2F035%2F063%2F726%2F3ea4031f045945e1843ae5156749d64c.jpg&refer=http%3A%2F%2Fyouimg1.c-ctrip.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1623130060&t=cecec57b4d51b8cd7072ddbbf73290d2',
					username: '小猫咪',
					time: '1555400035',
					data: '支持国产，支持DCloud!'
				},
				{
					id: 3,
					fid: 1,
					userpic:
						'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fyouimg1.c-ctrip.com%2Ftarget%2Ftg%2F035%2F063%2F726%2F3ea4031f045945e1843ae5156749d64c.jpg&refer=http%3A%2F%2Fyouimg1.c-ctrip.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1623130060&t=cecec57b4d51b8cd7072ddbbf73290d2',
					username: '小猫咪',
					time: '1555400035',
					data: '支持国产，支持DCloud!'
				},
				{
					id: 4,
					fid: 0,
					userpic:
						'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fyouimg1.c-ctrip.com%2Ftarget%2Ftg%2F035%2F063%2F726%2F3ea4031f045945e1843ae5156749d64c.jpg&refer=http%3A%2F%2Fyouimg1.c-ctrip.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1623130060&t=cecec57b4d51b8cd7072ddbbf73290d2',
					username: '小猫咪',
					time: '1555400035',
					data: '支持国产，支持DCloud!'
				}
			];
			// 转换时间
			for (var i = 0; i < arr.length; i++) {
				arr[i].time = time.gettime.gettime(arr[i].time);
			}
			this.comments = arr;
		},
		// 发送评论
		submit(data) {
			let nowDate = new Date().getTime();
			let arrs = {
				id: 4,
				fid: 0,
				userpic:
					'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fyouimg1.c-ctrip.com%2Ftarget%2Ftg%2F035%2F063%2F726%2F3ea4031f045945e1843ae5156749d64c.jpg&refer=http%3A%2F%2Fyouimg1.c-ctrip.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1623130060&t=cecec57b4d51b8cd7072ddbbf73290d2',
				username: '小猫咪',
				time: time.gettime.gettime(nowDate),
				data: data
			};
			this.comments.push(arrs);
		}
	}
};
</script>
<style lang="less" scoped>
.comments {
	.new_comment {
		font-weight: 550;
		padding: 15rpx;
	}
}
</style>
